<template>
	<div class="dialog">
		<div class="dialog__trigger" @click="open">
			<!-- 触发弹窗 -->
			<slot name="trigger"></slot>
		</div>
		<el-dialog
			v-model="visible"
			:custom-class="customClass"
			:center="center"
			:append-to-body="true"
			:width="width"
			:close-on-click-modal="clickModalClose"
			@closed="close"
		>
			<!-- 弹窗内容 -->
			<template v-if="title" #header>{{ title }}</template>

			<!-- 自定义内容 -->
			<slot>{{ content }}</slot>
			<!-- 底部弹窗页脚 -->
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="handleEvent('cancel')">
						{{ $t('common.cancelButtonText') }}
					</el-button>
					<el-button type="primary" @click="handleEvent('confirm')">
						{{ $t('common.confirmButtonText') }}
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	props: {
		title: {
			// 弹窗标题
			type: String,
			default: '',
		},
		content: {
			// 弹窗内容
			type: String,
			default: '',
		},
		width: {
			// 弹窗的宽度
			type: String,
			default: '400px',
		},
		disabled: {
			// 是否禁用
			type: Boolean,
			default: false,
		},
		async: {
			// 是否开启异步关闭
			type: Boolean,
			default: false,
		},
		clickModalClose: {
			// 点击遮罩层关闭对话窗口
			type: Boolean,
			default: false,
		},
		center: {
			// 是否居中布局
			type: Boolean,
			default: false,
		},
		customClass: {
			type: String,
			default: '',
		},
	},
	emits: ['confirm', 'cancel', 'close', 'open'],
	setup(props, { emit }) {
		const visible = ref(false);

		const handleEvent = (type: 'confirm' | 'cancel') => {
			emit(type);
			if (!props.async || type === 'cancel') {
				close();
			}
		};

		const close = () => {
			visible.value = false;
			nextTick(() => {
				emit('close');
			});
		};
		const open = () => {
			if (props.disabled) {
				return;
			}
			emit('open');
			visible.value = true;
		};
		provide('visible', visible);
		return {
			visible,
			handleEvent,
			close,
			open,
		};
	},
});
</script>

<style scoped lang="scss">
.dialog-body {
	white-space: pre-line;
}
</style>
